const path = require("path")
// @ts-ignore
const HtmlWebpackPlugin = require("html-webpack-plugin")
// @ts-ignore
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

module.exports = {
    // 入口文件
    entry: './src/index.ts',
    // 打包输出配置
    output: {
        // 输出目录
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: 'bundle.js',
        // 配置webpack的默认配置
        environment: {
            // 不使用箭头函数,ie浏览器不支持
            arrowFunction: false,
            // 不使用const
            const: false
        }
    },
    module: {
        rules: [
            // ts预处理
            {
                test: /\.ts$/,
                use: [
                    // babel 配置
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        targets: {
                                            "chrome": "88",
                                            "ie": "11"
                                        },
                                        "corejs": "3",
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    // ts加载器
                    'ts-loader',
                ],
                // 忽略依赖库
                exclude: /node_modules/
            },
            // less预处理
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // postcss 兼容处理
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                        {
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }

                    },
                    'less-loader',
                ]
            }
        ]
    },
    plugins: [
        // 配置html插件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 打包前清空 output
        new CleanWebpackPlugin()
    ],
    resolve: {
        // 引入模块后缀
        extensions: ['.ts', '.js', '.less', '.css']
    },
    // 开发服务器配置
    devServer: {
        host: 'localhost',
        port: 7000
    },
}